<template>
  <div class="no-padding app-container">
    <lst-page-container>
      <template slot="query">
        <el-form :model="tableQueryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="整改状态" prop="repairState">
            <el-select v-model="tableQueryParams.repairState">
              <el-option
                  v-for="dict in dict.type.enum_question_repair"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="rowHandel">
        <el-button type="primary" icon="el-icon-plus"
                   size="mini" @click="handleAdd">新增隐患
        </el-button>
      </template>

      <template slot="table">
        <el-table @sort-change="handleSortChange" height="100%" v-loading="loading" :data="dataList">
          <el-table-column :sortable="colum.sortable" v-for="(colum,index) in questionTableColum" :key="index"
                           :width="colum.width"
                           :label="colum.label"
                           :align="colum.align" :prop="colum.propValue">
            <template slot-scope="scope">
              <question-table-colum :scope="scope" :colum-config="colum"></question-table-colum>
            </template>
          </el-table-column>
          <el-table-column width="240" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="showInfo(scope.row)"
              >查看
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="tableQueryParams.pageNum"
            :limit.sync="tableQueryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </lst-page-container>


    <el-drawer
        class="diy-draw"
        :title="editTitle"
        :wrapperClosable="false"
        :size="addDrawWidth"
        :visible.sync="editOpen">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <el-form v-if="editOpen" :rules="rules" :model="form" ref="form" size="small"
                     label-width="80px">
              <el-form-item class="column-item" label="隐患描述" prop="questionDesc">
                <el-input
                    v-model="form.questionDesc"
                    placeholder="请输入隐患描述"
                    type="textarea"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item " label="隐患分类" prop="questionTypeCode">
                <choose-question v-model="form.questionTypeCode"></choose-question>
              </el-form-item>
              <el-form-item class="column-item" label="整改建议" prop="suggestion">
                <el-input
                    v-model="form.suggestion"
                    placeholder="请输入整改建议"
                    type="textarea"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item annex-box" label="整改前附件" prop="fileIds">
                <template slot="label">
                  文件列表
                  <el-button class="file-upload-bt" icon="el-icon-refresh" size="mini"
                             @click="upload">上传文件
                  </el-button>
                </template>
                <show-file-list :file-list="fileList" @delFile="delFile"></show-file-list>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitData">确定</el-button>
        </template>
      </drawer-content>
    </el-drawer>


    <el-drawer
        class="diy-draw"
        :title="title"
        :wrapperClosable="false"
        :size="addDrawWidth"
        :visible.sync="open">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <el-form v-if="open" :rules="rules" :model="form" ref="form" size="small"
                     label-width="80px">
              <el-form-item class="column-item " label="抽查企业" prop="enterpriseSerial">
                <choose-enterprise v-if="open" v-model="form.enterpriseSerial" :inspect-info="inspectInfo"
                                   :handel-code="handelCode"></choose-enterprise>
              </el-form-item>
              <el-form-item class="column-item" label="隐患列表" prop="items">
                <value-table :label-position="'top'" :dialog-form-label-width="`80px`" :dialog-width="`700px`" :value-config="questionValueTableConfig" v-model="form.items"></value-table>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitData">确定</el-button>
        </template>
      </drawer-content>
    </el-drawer>

    <el-drawer
        class="diy-draw"
        title="隐患详情"
        :wrapperClosable="false"
        :size="HIDDEN_DANGER_WIDTH"
        :destroy-on-close="true"
        :visible.sync="infoOpen">
      <drawer-content>
        <template slot="body">
          <hidden-danger-info ref="danInfo" :info-data="infoData" :inspect-info="inspectInfo"></hidden-danger-info>
        </template>
      </drawer-content>
    </el-drawer>
  </div>

</template>

<script>
import {listPageMixins} from "@/mixins/listPageMixins";
import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";
import {infoPageMixins} from "@/views/checkBusPage/subInfoPage/infoPageMixins";
import {
  defectSpotCheckQuestionAddQuestion,
  defectSpotCheckQuestionQueryQuestion,
  defectSpotCheckQuestionRemoveQuestion,
  defectSpotCheckQuestionUpdateQuestion,
} from "@/api/checkPage/defectSpotCheck";
import {isArr} from "@/utils/arrayUtil";
import {getQuestionDetail} from "@/api/checkPage/quertion";

export default {
  dicts: ['enum_question_repair'],
  mixins: [listPageMixins, subPageMixin, infoPageMixins],
  data() {
    return {
      modelName: '抽查隐患',
      getListFun: defectSpotCheckQuestionQueryQuestion,
      addFun: defectSpotCheckQuestionAddQuestion,
      updateFun: defectSpotCheckQuestionUpdateQuestion,
      getInfoFun: getQuestionDetail,
      deleteFun: defectSpotCheckQuestionRemoveQuestion,
    }
  },

  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      let {uid, fileFiled} = this
      let owner = this
      if (fileFiled != null && fileFiled !== '') {
        this.$store.commit('temporaryFile/REMOVE_ALL_FILE', this.uid)
      }
      this.getInfoData(row.id).then(data => {
        if (isArr(data[fileFiled])) {
          owner.$store.dispatch('temporaryFile/addDocList', {uid: this.uid, fileList: data[fileFiled]})
        }
        this.form = data;
        this.editOpen = true;
        this.editTitle = `修改${this.modelName}`;
      });
    },
  },
}
</script>

<style scoped>

</style>
